Categoria: Programacion Tema: Css Titulo: Disposicion de 2 columnas en html con Css
Fecha del Tema: 2013-02-25 19:15:01 Disposición de 2 columnas en html con Css Empezaremos a ver como componer una página sin utilizar las tablas (unmedio muy utilizado hasta hace muy poco, ya que es ampliamente soportadopor navegadores antiguos). Una solución para crear una página con dos columnas es utilizar elposicionamiento absoluto: <?php //esto no va <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="columna1"> Aquí va el contenido de la columna 1. </div> <div id="columna2"> Aquí va el contenido de la columna 2. </div> </body> </html> ?>//esto no va La hoja de estilo para esta página es: <?php //esto no va *{ margin:0px; padding:0px; } #columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55; } #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; } ?>//esto no va La primera regla de disponer el selector universal, es decir, afecta atodas las marcas HTML (a no ser que se defina una regla específica parauna marca), es sacar el margen y padding: <?php //esto no va *{ margin:0px; padding:0px; } ?>//esto no va Ahora la regla definida para la primer columna es: <?php //esto no va #columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55; } ?>//esto no va Es decir, inicializamos la propiedad position con el valor absolute, con loque debemos indicar la posición del div en la página por medio de laspropiedades top y left, en esta caso lo posicionamos en la columna 0 y fila0 y además inicializamos la propiedad width, con lo cual le estamosindicando que esta columna tendrá siempre 200 píxeles de ancho. Además inicializamos la propiedad margin-top con 10 píxeles, recordemosque todos los elementos tienen margin y padding cero. Ahora veamos cómo inicializamos la segunda columna: <?php //esto no va #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; } ?>//esto no va Esta regla no inicializa la propiedad position, por lo que el div ocupa laposición que le corresponde por defecto, es decir, empieza en lacoordenada 0,0 de la página. El truco está en inicializar la propiedadmargin-left con un valor mayor a 200, que es el ancho de la columna1. El resto de propiedades que inicializamos son el margin-top, para que seaigual que la primera columna y el margin-right, para que no quede el textopegado a la derecha.
Disposición de 2 columnas en html con Css Empezaremos a ver como componer una página sin utilizar las tablas (unmedio muy utilizado hasta hace muy poco, ya que es ampliamente soportadopor navegadores antiguos). Una solución para crear una página con dos columnas es utilizar elposicionamiento absoluto: <?php //esto no va <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="columna1"> Aquí va el contenido de la columna 1. </div> <div id="columna2"> Aquí va el contenido de la columna 2. </div> </body> </html> ?>//esto no va La hoja de estilo para esta página es: <?php //esto no va *{ margin:0px; padding:0px; } #columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55; } #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; } ?>//esto no va La primera regla de disponer el selector universal, es decir, afecta atodas las marcas HTML (a no ser que se defina una regla específica parauna marca), es sacar el margen y padding: <?php //esto no va *{ margin:0px; padding:0px; } ?>//esto no va Ahora la regla definida para la primer columna es: <?php //esto no va #columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55; } ?>//esto no va Es decir, inicializamos la propiedad position con el valor absolute, con loque debemos indicar la posición del div en la página por medio de laspropiedades top y left, en esta caso lo posicionamos en la columna 0 y fila0 y además inicializamos la propiedad width, con lo cual le estamosindicando que esta columna tendrá siempre 200 píxeles de ancho. Además inicializamos la propiedad margin-top con 10 píxeles, recordemosque todos los elementos tienen margin y padding cero. Ahora veamos cómo inicializamos la segunda columna: <?php //esto no va #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; } ?>//esto no va Esta regla no inicializa la propiedad position, por lo que el div ocupa laposición que le corresponde por defecto, es decir, empieza en lacoordenada 0,0 de la página. El truco está en inicializar la propiedadmargin-left con un valor mayor a 200, que es el ancho de la columna1. El resto de propiedades que inicializamos son el margin-top, para que seaigual que la primera columna y el margin-right, para que no quede el textopegado a la derecha.
Css